import { useState } from "react";
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { User, LogOut, Coins } from "lucide-react";
import { useUser } from "@/contexts/UserContext";

const UserAvatar = () => {
  const { user, isAuthenticated, logout } = useUser();
  const [open, setOpen] = useState(false);

  if (!isAuthenticated) {
    return (
      <Button
        asChild
        variant="hero"
        size="sm"
        className="shadow-[var(--shadow-button)]"
      >
        <Link to="/login">登录/注册</Link>
      </Button>
    );
  }

  return (
    <DropdownMenu open={open} onOpenChange={setOpen}>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          className="relative h-10 w-10 rounded-full hover:bg-accent/50 transition-[var(--transition-smooth)]"
        >
          <Avatar className="h-8 w-8 ring-2 ring-primary/20 hover:ring-primary/40 transition-[var(--transition-smooth)]">
            <AvatarImage
              src={user?.avatar}
              alt={user?.nickName || "用户头像"}
            />
            <AvatarFallback className="bg-[var(--gradient-primary)] text-primary-foreground">
              <User className="h-4 w-4" />
            </AvatarFallback>
          </Avatar>
        </Button>
      </DropdownMenuTrigger>

      <DropdownMenuContent
        className="w-64 bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/60 border-border/50 shadow-[var(--shadow-elegant)]"
        align="end"
      >
        {/* 用户信息 */}
        <div className="flex items-center space-x-3 px-4 py-3">
          <Avatar className="h-12 w-12 ring-2 ring-primary/20">
            <AvatarImage
              src={user?.avatar}
              alt={user?.nickName || "用户头像"}
            />
            <AvatarFallback className="bg-[var(--gradient-primary)] text-primary-foreground">
              <User className="h-5 w-5" />
            </AvatarFallback>
          </Avatar>
          <div className="flex-1 space-y-1">
            <p className="text-sm font-medium text-foreground">
              {user?.nickName || "未设置昵称"}
            </p>
            <p className="text-xs text-muted-foreground">{user?.phonenumber}</p>
          </div>
        </div>

        <DropdownMenuSeparator />

        {/* 积分信息 */}
        <DropdownMenuItem asChild>
          <Link
            to="/credits"
            className="flex items-center space-x-2 cursor-pointer hover:bg-accent transition-[var(--transition-fast)]"
          >
            <Coins className="h-4 w-4 text-warning" />
            <span>我的积分</span>
            <span className="ml-auto text-sm font-semibold text-primary">
              {user?.credits || 0}
            </span>
          </Link>
        </DropdownMenuItem>

        {/* 个人信息 */}
        <DropdownMenuItem asChild>
          <Link
            to="/profile"
            className="flex items-center space-x-2 cursor-pointer hover:bg-accent transition-[var(--transition-fast)]"
          >
            <User className="h-4 w-4 text-muted-foreground" />
            <span>个人信息</span>
          </Link>
        </DropdownMenuItem>

        <DropdownMenuSeparator />

        {/* 退出登录 */}
        <DropdownMenuItem
          onClick={logout}
          className="flex items-center space-x-2 text-destructive focus:text-destructive cursor-pointer hover:bg-destructive/10 transition-[var(--transition-fast)]"
        >
          <LogOut className="h-4 w-4" />
          <span>退出登录</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

export default UserAvatar;
